<template>
	<view>
		<!-- 	<u-grid :col="4" :border="false">
				<u-grid-item @click="checkThis(index)" :class="current===index?activeText:normalText" class="emojifont"
				v-for="(val,index) in [...emojis]" :key="index">
					<view style="margin-right: 0px;">
						<view>{{val.emoji}}</view>
					</view>
					<view class="grid-text" style="font-size: 12px;text-align: center;">{{ val.info }}</view>
				</u-grid-item>
				
			</u-grid> -->
	</view>
</template>

<script>
	import emojis from './emojis.js';
	let timer = null
	export default {
		name: 'em-header',
		props: {},
		data() {
			return {
				styles: {},
				confirm: null,
				menus: [],
				title: "",
				emojis: emojis,
				current: 0,
				favor_face_list: [],
				menusList: [],
				activeText: 'activeText',
				normalText: 'normalText',
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		watch: {},
		computed: {

		},
		async created() {
			// let emojisList = [];
			// for (let i = 0; i <= 82; i++) {
			// 	emojisList.push(`/uC${this.transformnum(i)}`)
			// }
			// console.log(emojisList)
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			transformnum(num) {
				let len = 3 //显示的长度，如果以0001则长度为4
				num = parseInt(num, 10) + 1 //转数据类型，以十进制自增
				num = num.toString() //转为字符串
				while (num.length < len) { //当字符串长度小于设定长度时，在前面加0
					num = "0" + num
				}
				return num
			},
			checkThis(index) {
				console.log(index)
				this.current = index
			},
			open() {
				this.$refs.confirm.open()
				this.$refs.confirm.closeMask()
			},
			onClose(e) {},
		}
	}
</script>

<style>
	.activeText {
		font-size: 32px;
		opacity: 1;
	}

	.normalText {
		font-size: 32px;
		opacity: 0.5;
	}

	.camera-icon {
		padding: 60rpx;
		border-radius: 30rpx;
		font-size: 32px;
	}

	.border-bottom {
		border-bottom-width: 1px;
		border-style: solid;
		border-color: #EBEBEB;
	}

	.list-item-left-icon-text {
		font-size: 26px;
	}

	.emojifont {
		font-family: emojifont !important;
		font-style: normal;
		display: flex;
	}

	.flex {
		display: flex;
		flex-direction: row;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.px-2 {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex-1 {
		flex: 1;
	}

	.px-1 {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.py-1 {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>